<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<!-- 引入公共meta -->
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<title>区域管理</title>
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="static/iframe/bootstrap/bootstrap-table/css/bootstrap-table.min.css"/>
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap-theme.min.css">
</head>
<style type="text/css">
.fixed-table-body {
	height: auto;
}

.btn-group-vertical>.btn, .btn-group>.btn {
	height: 35px;
}

a:hover {
	text-decoration: none;
}
#toolbarDiv{
position:relative;bottom:-16px;
}
#toolbar{
position:relative;
}
.layui-breadcrumb a{
vertical-align:middle;
}
.fixed-table-toolbar .columns label input{
 vertical-align:text-bottom;
 margin:0px;
}
</style>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb" style="visibility: visible;"><a>
				<cite> 首页<span class="layui-box">&gt;</span></cite>
		</a> <a> <cite> 基础设置<span class="layui-box">&gt;</span></cite></a> <a>
				<cite>区域管理</cite>
		</a> </span> <a class="btn btn-sm btn-success"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="glyphicon glyphicon-refresh" style="line-height: 20px"></i></a>
	</div>
	<div class="x-body">
		<div class="row">
			<form id="formSearch" class="form-horizontal">
				<div
					class="col-md-2 col-lg-2 col-sm-2 col-xs-2 col-md-offset-2 col-lg-offset-2  col-sm-offset-1  col-xs-offset-1">
				</div>
				<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6">
					<div class="row">
						<div class="col-md-3 col-lg-3 col-sm-3 col-xs-3"
							style="padding: 0px;">
							<select id="queryType" class="form-control "
								data-live-search="false">
								<option value="all">请选择</option>
								<option value="province">省区</option>
								<option value="city">城市</option>
								<option value="district">区域</option>
							</select>
						</div>
						<div class="col-md-9 col-lg-9 col-sm-9 col-xs-9"
							style="padding: 0px;">
							<input type="hidden" name="type" id="type" value="all">
							<div class="input-group">
								<input type="text" id="province" class="form-control"
									placeholder="输入省，市，区"> <span class="input-group-btn">
									<button class="btn btn-success" type="button" id="regionSearch">
										<i class="glyphicon glyphicon-search"></i> 查询
									</button>
								</span>
							</div>
						</div>
					</div>
				</div><!-- /.col-lg-6 -->
			</form>
		</div>
		<div id="toolbar">
			<div id="toolbarDiv">
				<a href="javascript:;" onclick="dataRegionDel()"
					class="btn btn-danger radius btn-sm"> <i
					class="glyphicon glyphicon-trash"></i> 批量删除
				</a> <a href="javascript:;"
					onclick="region_add('添加区域','sys/region/add','450','330')"
					class="btn btn-primary radius btn-sm"> <i
					class="glyphicon glyphicon-plus"></i> 添加 </a>
				<!-- <a href="#" data-toggle="modal"
				 data-target="#myExcel" class="btn btn-warning radius btn-sm" >
				 <i class="glyphicon glyphicon-import"></i> 批量导入
				  </a> -->
			</div>
		</div>
		<div class="modal fade" id="myExcel" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">导入Excel表格</h4>
				</div>
				<div class="modal-body">
					<form enctype="multipart/form-data" method="post" name="fileForm">
						<label for="upload"> 
						<input type="file" id="upload" class="file" name="fileName"
							style='opacity: 1.5; filter: alpha(opacity = 1.5);'>
						</label>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" id="btnExcel" class="btn btn-primary">提交数据</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
		<table id="regionTable" class="table table-hover"  style="white-space: nowrap;"
						data-pagination="true" data-checkbox-header="true"
						data-toolbar="#toolbar" data-show-refresh="true"
						data-content-type="application/x-www-form-urlencoded"
						data-response-handler="responseHandler"
						data-showColumns="true" data-undefined-text=" ">
			<thead>
				<tr>
					<th data-checkbox="true"  data-field="state" data-align="center"></th>
					<th data-width="80" data-align="center" data-field="id"
						data-sortable="true" data-align="center">ID</th>
					<th data-width="100" data-align="center" data-field="province">省</th>
					<th data-width="90" data-align="center" data-field="city">市</th>
					<th data-width="100" data-align="center" data-field="district"
						data-sortable="true">区</th>
					<th data-width="100" data-align="center" data-field="postCode">邮编</th>
					<th data-width="100" data-align="center" data-field="shortCode"
						data-sortable="true">简码</th>
					<th data-width="100" data-align="center" data-field="cityCode">城市编码</th>
					<th data-width="100" data-align="center" data-formatter="operation">操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</body>
<!--请在下方写此页面业务相关的脚本-->
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
<script type="text/javascript" src="static/plugins/jq/jquery-3.2.1.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/layer/layer.js"></script>
<script type="text/javascript" src="static/plugins/window/layershow.js"></script>
<script type="text/javascript" src="static/plugins/window/referparent.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-tableExport/js/FileSaver.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/lodash.min.js"></script>
<script type="text/javascript" src="static/iframe/lib/jquery.form.js"></script>
<c:if test="${fn:contains(userSession.resourceList, 'user/update')}">
	<script type="text/javascript">
		$.canEdit = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/delete')}">
	<script type="text/javascript">
		$.canDelete = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/add')}">
	<script type="text/javascript">
		$.canInsert = true;
	</script>
</c:if>
<script type="text/javascript">
	$(function() {
		//初始化表格
		initTable();
		//当点击查询按钮的时候执行  
		$("#regionSearch").bind("click", initTable);
		
		//批量导入数据
		$("#btnExcel").click(function(){
			var subFileName = $("#upload").val().substring(
					$("#upload").val().lastIndexOf(".") + 1);
			if (subFileName != "xls" && subFileName != "xlsx") {
				alert("只能上传excel文件");
				return false;
			}
			alert(subFileName)
			
			var form = $("form[name=fileForm]");
			var options = {
				url : 'region/importRegions', //上传文件的路径  
				type : 'post',
				success : function(result) {
					var data = $.parseJSON(result);
					if (data.flag) {
						layer.msg(data.msg, {
							icon : 1,
							time : 1000
						});
						$("#myExcel").modal('hide');
						initTable();
					} else {
						layer.msg(data.msg, {
							icon : 2,
							time : 2000
						});
					}
				}
			};
			form.ajaxSubmit(options);
		});
	});
	//初始化表格
	function initTable() {
		//先销毁表格  
		$("#regionTable").bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据  
		$("#regionTable").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			url : "region/regionList", //获取数据的Servlet地址  
			dataType : "json",
			striped : true, //表格显示条纹  
			pagination : true, //启动分页  4
			pageSize : 5, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			//search: true, //是否启用查询
			//searchOnEnterKey : true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
			showColumns : true, //显示下拉框勾选要显示的列  
			showRefresh : true, //显示刷新按钮 
			uniqueId : "id", //每一行的唯一标识，一般为主键列
			clickToSelect : false, //是否启用点击选中行
			sidePagination : "server", //表示服务端请求  
			paginationLoop : false,
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "limit",
			icons : {
				refresh : 'glyphicon-repeat',
				toggle : 'glyphicon-list-alt',
				columns : 'glyphicon-list'
			},
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					offset : params.offset,
					limit : params.limit,
					sort : params.sort,
					order : params.order,
					content : $("#province").val(),
					type:$("#type").val()
				}
				return param;
			},
			onLoadError : function() { //加载失败时执行  
				layer.msg("加载数据失败", {
					time : 1500,
					icon : 2
				});
			}
		});
	}
	

	var $table = $('#regionTable'),selections = [];
	$(function () {
		$table.on('check.bs.table check-all.bs.table ' +
	        'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
	    var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
	            return row.id;
	        }),
	    func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
	    selections = _[func](selections, ids);
	  });
	});
	function responseHandler(res) {
		$.each(res.rows, function (i, row) {
		    row.state = $.inArray(row.id, selections) !== -1;
		});
		return res;
	}

	//value: 所在collumn的当前显示值，
	//row:整个行的数据 ，对象化，可通过.获取
	//表格-操作 - 格式化 
	function operation(value, row, index) {
		var str = "&nbsp;";
		str += "&nbsp;&nbsp;"
		//if($.canEdit){
			str += "<a style='text-decoration:none' onClick=region_update('编辑','region/selectRegionById/"+ row.id+ "','450','410')  title='编辑'  href='javascript:;'  class='ml-5'><i class='glyphicon glyphicon-edit'></i></a>"; 
		//}
			str += "&nbsp;&nbsp;&nbsp;&nbsp;"
		//if($.canDelete){
				str += "<a title='删除' href='javascript:;' onclick=region_delete(this,'"+ row.id+ "') class='ml-5' style='text-decoration:none'><i class='glyphicon glyphicon-trash'></i></a>";
		//}
		return str;
	}

	/*区域-编辑*/
	function region_update(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*区域-添加*/
	function region_add(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	/*区域-删除*/
	function region_delete(obj, id) {
		layer.confirm('确认要删除吗？', function(index) {
			$.ajax({
				type : 'POST',
				url : 'region/deleteRegion',
				dataType : 'json',
				data : {
					"id" : id,
				},
				success : function(data) {
					if (data.flag) {
						layer.msg(data.msg, {
							icon : 1,
							time : 1000
						});
						initTable();
					} else {
						layer.msg(data.msg, {
							icon : 2,
							time : 1000
						});
					}
				},
				error : function(data) {
					layer.msg(data.msg, {
						icon : 2,
						time : 1000
					});
				},
			});
		});
	}
	
	/*区域批量删除*/
	function dataRegionDel() {
		var row = selections;
		console.info(row);
		 var ids = "";
		 for (var i = 0; i < row.length; i++) {
			if(i==0 || i=="0"){
				ids += row[i];
			}else{
				ids += ","+row[i];
			}
		}
		 console.info(ids);
		if (ids == "") {
			layer.msg('请选择后再删除!', {
				icon : 2,
				time : 1000
			});
		} else {
			layer.confirm('区域删除须谨慎，确认要批量删除吗？', function(index) {
				$.ajax({
					type : 'POST',
					url : 'region/deleteRegionByIds',
					dataType : 'json',
					data : {
						"ids" : ids,
					},
					success : function(data) {
						if (data.flag) {
							layer.msg(data.msg, {
								icon : 1,
								time : 1000
							});
							initTable();
						} else {
							layer.msg(data.msg, {
								icon : 2,
								time : 1000
							});
						}
					},
					error : function(data) {
						layer.msg(data.msg, {
							icon : 2,
							time : 1000
						});
					},
				});
			});
		}
	}
	$(document).ready(function () {
		//n 是事件  
		$("#queryType").bind("change",function(n,o){
			console.info(this.value);
			$("#type").val(this.value);
			if(this.value==""){
				$("#province").val('');
			}
		})
	});
</script>
<!-- 引入x-admin公共js -->
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
</html>